// 生成三角形
.triangle (top, @size: 5px, @color: red) {
    border: @size solid transparent;
    border-bottom-color: @color;
}
.triangle (bottom, @size: 5px, @color: red) {
    border: @size solid transparent;
    border-top-color: @color;
}
.triangle (left, @size: 5px, @color: red) {
    border: @size solid transparent;
    border-right-color: @color;
}
.triangle (right, @size: 5px, @color: red) {
    border: @size solid transparent;
    border-left-color: @color;
}
.triangle(@_, @size: 5px, @color: red) {
    width: 0;
    height: 0;
}

// 布局时常用的样式
.layout(@width, @height, @color: red) {
    width: @width;
    height: @height;
    background: @color;
}